<template>
	<div>
		<breadcrumb></breadcrumb>
		<!-- 列表 -->
		<div class="main">
			<div class="main_head">
				<div class="main_head_left">
					<div class="dialogs" style="margin-left: 20px; margin-right: 20px">
						<el-input size="small" v-model="carName" :readOnly="true" placeholder="请选择车队">
							<template slot="append">
								<div style="cursor: pointer" @click="SelectFeet">选择车队</div>
							</template>
						</el-input>
						<div style="width: 20px"></div>
					</div>
					<div class="inputItem">
						<div class="title">司机名称</div>
						<div class="inputBox">
							<el-input v-model="driverName" @keyup.enter.native="cread(1)" clearable>
							</el-input>
						</div>
					</div>
					<div class="inputItem" >
					  <div class="title" >时间</div>
					  <el-date-picker v-model="createTime"  type="datetimerange" :picker-options="pickerOptions"
					    range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" align="right"
					    value-format="yyyy-MM-dd HH:mm:ss">
					  </el-date-picker>
					</div>
					<!-- 查询 -->
					<el-button type="primary" size="small" icon="el-icon-search" @click="cread(1)">查询</el-button>
					<el-button type="plain" size="small" icon="el-icon-refresh-right" @click="CleanUp">清空</el-button>
				</div>
				<div class="main_head_right">
					<!-- <button class="addCargoOwner" @click="showAddAddress()">
						<i class="el-icon-plus iconBtn"></i>
						<span>新增</span>
					</button> -->
					<!-- <button class="addCargoOwner" @click="Download">
						下载地址簿模板
					</button> -->
					<el-button class="addCargoOwner" @click="exportDown" :loading="exportLoading">
						导出司机费用数据统计
					</el-button>
					<!-- <el-upload ref="upload" action="https://jsonplaceholder.typicode.com/posts/" :before-upload="upload"
						:show-file-list="false" accept=".xlsx,.xls" >
						<el-button class="addCargoOwner">导入地址簿</el-button>
					</el-upload> -->
				</div>
			</div>

			<div class="list">
				<el-table :data="records" style="width: 100%" header-align="left">
					<el-table-column align="left" width="70" label="序号">
						<template slot-scope="scope">
							{{ scope.$index + 1 + (pageIndex - 1) * 15 }}
						</template>
					</el-table-column>
					<el-table-column align="left" prop="supplierName" label="运营商名称">
					</el-table-column>
					<el-table-column align="left" prop="fleetName" label="车队名称">
					</el-table-column>
					<el-table-column align="left" prop="driverName" label="司机名称">
					</el-table-column>
					<el-table-column align="left" prop="phoneNumber" label="司机联系方式">
					</el-table-column>
					<el-table-column align="left" prop="billAmount" label="金额">
					</el-table-column>
					<el-table-column align="left" prop="settlementAmount" label="实际金额">
					</el-table-column>
				</el-table>
			</div>
			<div class="paginationBox">
				<div class="paginationtext" v-if="formdata">
					<span>金额：{{
              formdata.orderAmountAll ? formdata.orderAmountAll : 0
            }}</span>
					<span>实际金额：{{
              formdata.payAmountAll ? formdata.payAmountAll : 0
            }}</span>
				</div>
				<el-pagination @current-change="changePages($event)" class="pagination" background
					layout="slot,prev, pager, next" :current-page.sync="pageIndex" :total="data.total * 1"
					:page-size="data.size * 1" :pager-count="5">
					<template slot>
						<span style="
                color: #686868;
                font-size: 12px;
                margin-right: 20px;
                display: inline-block;
              ">
							共{{ data.total }}条,每页{{ data.size }}条
						</span>
					</template>
				</el-pagination>
			</div>
		</div>


		<el-dialog title="车队信息" :visible.sync="DialogFleet" center class="fpkp-dialog">
			<el-row class="flex-fpkp">
				<el-col :md="10" class="ipt-qym">
					<el-input v-model="fleetNameValue" placeholder="请输入车队名称" clearable>
					</el-input>
				</el-col>
				<el-col class="cxbt">
					<el-button type="primary" @click="qyxz('车队信息')">查询</el-button>
				</el-col>
			</el-row>
			<!-- 无数据时显示 -->
			<div class="null-png" v-if="DialogAcceptmood.length == 0">
				<div>
					<img src="/null.png" alt="" />
					<p>暂无数据</p>
				</div>
			</div>
			<el-table v-else class="xzc" style="width: 100%; overflow-y: scroll; height: 500px" :data="DialogAcceptmood"
				:header-cell-style="{
          background: '#f5f7fa',
          color: '#606266',
        }" highlight-current-row row-class-name="row-class">
				<el-table-column prop="fleetName" label="承运方名称" align="center"></el-table-column>
				<!-- 操作 -->
				<el-table-column label="操作按钮" align="center">
					<template slot-scope="scope">
						<div class="cmd-bt-config">
							<el-button type="primary" style="margin-bottom: 10px"
								@click="AcceptListFleet(scope.row)">选择</el-button>
						</div>
					</template>
				</el-table-column>
			</el-table>
		</el-dialog>
	</div>
</template>

<script>
	import {
		workbook2blob,
		openDownloadDialog,
	} from "@/common/blobAndOpenDownload.js";
	import XLSX from "xlsx";
	import breadcrumb from "@/components/breadcrumb.vue";
	import httpApi from "@/http";
	// import exportFromJSON from 'export-from-json'

	export default {
		data() {
			return {
				pickerOptions: {
				  shortcuts: [{
				    text: '最近一周',
				    onClick(picker) {
				      const end = new Date();
				      const start = new Date();
				      start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
				      picker.$emit('pick', [start, end]);
				    }
				  }, {
				    text: '最近一个月',
				    onClick(picker) {
				      const end = new Date();
				      const start = new Date();
				      start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
				      picker.$emit('pick', [start, end]);
				    }
				  }, {
				    text: '最近三个月',
				    onClick(picker) {
				      const end = new Date();
				      const start = new Date();
				      start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
				      picker.$emit('pick', [start, end]);
				    }
				  }]
				},
				stateValue: "",
				options: [{
						value: "",
						label: "全部",
					},
					{
						value: "0",
						label: "正常",
					},
					{
						value: "1",
						label: "异常",
					},
				],
				createTime: [],
				title: "新增地址",
				records: [],
				records1: [],
				data: {
					total: "",
					size: "",
				},

				exportLoading: false,
				formdata: {},
				loading: false,
				pageIndex: 1,
				pageSize: 15,
				dialogVisible: false,
				driverName: "",
				fleetId: "",

				DialogAccept: false,
				supplierNameValue: "",
				Acceptmood: [],
				Carrier: "",

				fleetNameValue: "",
				DialogAcceptmood: [],
				DialogFleet: false,
				carName: "",
			};
		},
		methods: {
			//搜索查询
			qyxz(e) {
				/* supplierName */
				if (e == "货主信息") {
					this.Selectcargoe();
				} else if (e == "项目信息") {
					this.Selectitem();
				} else if (e == "供应商信息") {
					//选择承运方
					this.SelectAccept();
				} else if (e == "车队信息") {
					//承运名称 即车队名称
					this.AcceptXuan();
				}
			},


			//车队选择
			async SelectFeet() {
				let parmas = {
					fleetName: this.fleetNameValue,
				};
				let res = await this.$http.orderApi.queryAllFleet(parmas);
				let mood = [];
				let cont = res.data.data.nfleet;
				let cont1 = res.data.data.wfleet;
				cont.forEach((item, index) => {
					var d = {
						fleetName: item.fleetName,
						fleetId: item.fleetId,
						index: 1
					}
					mood.push(d)
				})
				cont1.forEach((item, index) => {
					var d1 = {
						fleetName: item.fleet_name,
						fleetId: item.fleet_id,
						index: 2
					}
					mood.push(d1)
				})
				this.DialogAcceptmood = mood;
				this.DialogFleet = true;
			},
			//选择车队
			async AcceptListFleet(e) {
				this.fleetNameValue = "";
				this.carName = e.fleetName;
				this.fleetId = e.fleetId;
				this.DialogFleet = false;
				////console.log(res.data);
			},


			//导出文档
			async exportDown() {
				let data = {
					pageIndex: this.pageIndex,
					pageSize: this.pageSize,
					driverName: this.driverName,
					fleetId: this.fleetId,
				};
				if(this.createTime.length>0){
					data.startTime=this.createTime[0];
					data.endTime=this.createTime[1];
				}
				let res = await this.$http.orderApi.queryExportSupplierDriver(
					data
				);
				this.exportLoading = true;
				const sheetData1 = res.data.data.map((item, index) => ({
					序号: index + 1,
					运营商名称: item.supplierName,
					车队名称: item.fleetName,
					司机名称: item.driverName,
					司机联系方式: item.phoneNumber,
					结算金额: item.billAmount,
					实际金额: item.settlementAmount,
				}));
				sheetData1.push({});
				sheetData1.push({
					结算金额:"总金额："+this.formdata.orderAmountAll,
					实际金额:"实际总金额："+this.formdata.payAmountAll
				});
				const sheet1 = XLSX.utils.json_to_sheet(sheetData1);
				for (let key in sheet1) {
					// //console.log(key);
					if (key != "!ref" && key != "!merges" && key != "!cols") {
						sheet1[key].s = {
							alignment: {
								horizontal: "center",
								vertAlign: "center",
							},
						};
					}
				}
				let cols = []; // 设置每列的宽度
				// wpx 字段表示以像素为单位，wch 字段表示以字符为单位
				// //console.log(sheetData1);
				let headCol = [
					"序号",
					"运营商名称",
					"车队名称",
					"司机名称",
					"司机联系方式",
					"结算金额",
					"实际结算金额"
				];
				for (let i = 0; i <= headCol.length; i++) {
					let col = {};
					col.wch = this.getCellWidth(headCol[i], sheetData1);
					cols.push(col);
				}
				sheet1["!cols"] = cols; // 设置列宽信息到工作表
				const wb = XLSX.utils.book_new(); // 初始化一个excel文件
				XLSX.utils.book_append_sheet(wb, sheet1, "司机费用统计");
				const workbookBlob = workbook2blob(wb);
				openDownloadDialog(workbookBlob, `司机费用统计.xlsx`);
				this.exportLoading = false;
			},
			getCellWidth(value, sheetData) {
				//计算每列的需设置的宽度
				return 20;
			},
			changePages(e) {
				this.pageIndex = e;
				this.cread();
			},
			CleanUp() {
				this.driverName = "";
				this.fleetId = "";
				this.carName = ''
				this.cread(1);
			},
			async cread(e) {
				if (e) {
					this.pageIndex = 1;
				}
				let data = {
					pageIndex: this.pageIndex,
					pageSize: this.pageSize,
					driverName: this.driverName,
					fleetId: this.fleetId,
				};
				if(this.createTime.length>0){
					data.startTime=this.createTime[0];
					data.endTime=this.createTime[1];
				}
				let res = await this.$http.orderApi.querySupplierDriver(data);
				let res1 = await this.$http.orderApi.querySummarySupplierDriver(
					data
				);
				this.data.total = res.data.data.total;
				this.data.size = res.data.data.size;

				this.records = res.data.data.records;
				this.formdata = res1.data.data;
				//console.log(this.formdata);
			},
		},
		created() {
			this.cread();
		},
		mounted() {},
		components: {
			breadcrumb,
		},
	};
</script>

<style lang="scss" scoped>
	.paginationtext {
		font-size: 12px;
		color: #1890ff;
	}

	.paginationtext span {
		margin-right: 10px;
	}

	.flex-fpkp {
		display: flex;
		margin-bottom: 15px;
	}

	.main {
		width: 100%;

		height: calc(100vh - 127px);
		background-color: #fff;
		padding: 0px 30px 0px 30px;
		// overflow-x: scroll;
		// min-width: 970px;

		.main_head {
			padding: 10px 0;

			.main_head_left {
				font-size: 12px;
				color: #262626;
				display: flex;

				.inputItem {
					display: flex;
					align-items: center;
					margin-right: 23px;

					>.title {
						color: #262626;
						font-size: 12px;
						margin-right: 7px;
					}

					>.inputBox {
						width: 160px;

						.select {
							::v-deep .el-input__icon {
								line-height: 0;
							}
						}

						::v-deep .el-input__inner {
							height: 32px;
							font-size: 12px;
						}

						::v-deep .el-input__inner::placeholder {
							color: #c3c3c3;
							font-size: 12px;
						}
					}
				}
			}

			.main_head_right {
				display: flex;
				justify-content: flex-end;
				margin-top: 10px;

				.addCargoOwner {
					background-color: #1890ff;
					border-radius: 4px;
					height: 32px;
					color: #ffffff;
					font-size: 12px;
					padding: 8px 17px 9px 17px;
					transition: 0.2s;
					cursor: pointer;
					margin-right: 17px;

					.iconBtn {
						margin-right: 7px;
						font-size: 12px;
					}

					&:hover {
						opacity: 0.8;
					}
				}
			}
		}

		.list {
			height: calc(100% - 143px);

			::v-deep .el-table__body-wrapper {
				height: calc(100vh - 320px);
				overflow-y: scroll;
			}

			// 表头样式
			::v-deep .el-table__header th {
				background-color: #f0f6fd;
				color: #262626;
				font-size: 12px;
				font-weight: bold;
				text-align: left;

				// 表 body的td
				::v-deep .el-table__body td {
					color: #595959;
					font-size: 12px;
				}
			}

			.stateBtns {
				height: 30px;

				::v-deep .el-button {
					font-size: 12px;
					border: none;
					width: 76px;
					height: 30px;
					margin: 0 auto;
					box-sizing: border-box;
				}

				.icon-dian {
					font-size: 12px;
				}

				.Pass {
					background-color: #ecf5fe;
					color: #1890ff;
					display: flex;
					justify-content: center;
					align-items: center;
					padding: 10px 10px 9px;
				}

				.noPass {
					background-color: #fde8e9;
					color: #f7555d;
					display: flex;
					justify-content: center;
					align-items: center;
				}
			}
		}

		.paginationBox {
			width: 100%;
			background-color: #fff;
			display: flex;
			height: 48px;
			align-items: center;

			.pagination {
				margin-left: auto;
			}
		}
	}

	.dialog {
		.link {
			color: #1890ff;
			cursor: pointer;
			transition: 0.2s;
			margin-bottom: 15px;
			margin-left: 335px;
			display: inline-block;

			&:hover {
				opacity: 0.8;
			}
		}

		// 标题
		::v-deep .el-dialog__header {
			border-bottom: 1px solid #f0f0f0;
			padding: 15px 20px;
			color: #262626;
			font-size: 14px;
			font-weight: bold;
			height: 50px;
		}

		::v-deep .el-dialog__title {
			font-size: 14px;
			color: #303133;
			font-weight: bold;
		}

		//关闭图标
		::v-deep .el-dialog__headerbtn .el-dialog__close {
			font-size: 15px;
		}

		::v-deep .el-dialog__body {
			padding: 25px 40px 24px;
		}

		//   表格
		::v-deep .el-form-item__label {
			line-height: 32px;
			font-size: 12px;
			color: #262626;
			padding-top: 4px;
			width: 100%;
		}

		::v-deep .el-input__inner {
			line-height: 32px;
			height: 32px;
			padding: 0 10px;
		}

		.cancelBtn {
			width: 80px;
			height: 36px;
			border: 1px solid #d9d9d9;
			color: #262626;
			font-size: 12px;
			border-radius: 4px;
			background-color: #fff;
		}

		.submitBtn {
			background-color: #1890ff;
			width: 80px;
			height: 36px;
			color: #fff;
			border-radius: 4px;
			font-size: 12px;
		}

		.inputSelect_left {
			height: 32px;

			::v-deep .el-input__inner {
				border-radius: 4px 0px 0px 4px;
			}
		}

		.inputSelect_right {
			height: 32px;

			::v-deep .el-input__inner {
				border-radius: 0px 4px 4px 0px;
				border-left: none;
				background-color: #f5f7fa;
				font-size: 12px;
				color: #606266;
			}
		}

		::v-deep .el-input__icon {
			line-height: 0;
		}

		::v-deep .el-form-item__content {
			line-height: 0;
		}

		.notes ::v-deep .el-textarea .el-input__count {
			bottom: 15px;
			color: #c0c4cc;
		}
	}
</style>